import { Button, Menu } from "antd";
import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
} from "@ant-design/icons";
import { useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";

const items = [
  {
    key: "/home",
    icon: <DesktopOutlined />,
    children: [
      {
        key: "/home/index",
        label: "第一页",
        icon: <MailOutlined />,
      },
      {
        key: "/home/timeline",
        label: "B站测试",
        icon: <ContainerOutlined />,
      },
      {
        key: "/home/fileUpload",
        label: "文件转移测试",
        icon: <MenuUnfoldOutlined />,
      },
      // {
      //   key: "/home/flv",
      //   label: "flv测试",
      //   icon: <MenuFoldOutlined />,
      // },
    ],
    label: "首页",
  },
  {
    key: "/socket",
    icon: <AppstoreOutlined />,
    label: "socket测试",
  },
  {
    key: "/test",
    icon: <AppstoreOutlined />,
    label: "测试页面",
  },
];

export default function MyMenu() {
  const navigate = useNavigate();
  const location = useLocation();
  const [defaultOpenKeys, handDefaultOpenKeys] = useState([items[0].key]);
  const [SelectedKeys, handSelectedKeys] = useState([location.pathname]); //初始选中数据

  const ItemClick = ({ key, keyPath }) => {
    console.log(key);
    navigate(key);
    handDefaultOpenKeys(keyPath);
  };

  return (
    <Menu
      defaultOpenKeys={defaultOpenKeys}
      defaultSelectedKeys={SelectedKeys}
      mode="inline"
      theme="light"
      items={items}
      onClick={ItemClick}
    />
  );
}
